<template>
  <div class="color-picker" v-if="showColor">
    <div class="title">主题颜色</div>
    <div class="color-row">
      <!--     class     actived-->
      <span
        v-for="color in topColors"
        :key="color"
        :class="[color === activeColor ? 'actived ' : '']"
        class="color-point"
        :style="{ backgroundColor: color }"
        @click="handleChangeColor(color)"
      >
      </span>
    </div>
    <div class="color-content">
      <div
        v-for="(group, index) in contentColors"
        :key="index"
        class="color-row"
      >
        <span
          v-for="color in group"
          :class="[color === activeColor ? 'actived ' : '']"
          class="color-point"
          :key="color"
          :style="{ backgroundColor: color }"
          @click="handleChangeColor(color)"
        >
        </span>
      </div>
    </div>
    <div class="color-standard">
      <div class="title">标准颜色</div>
      <div class="color-row">
        <span
          v-for="(color, index) in standardColors"
          :key="color"
          :class="[color === activeColor ? 'actived ' : '']"
          class="color-point"
          :style="{ backgroundColor: color }"
          @click="handleChangeColor(color)"
        >
        </span>
      </div>
    </div>
    <!--    背景颜色 无填充-->
    <div
      v-if="actionType === 'setBackgroundColor'"
      class="color-none"
      @click="handleChangeColor('#ffffff')"
    >
      <span
        class="color-point"
        style="background-color: rgba(0, 0, 0, 0)"
      ></span>
      <span class="text">无填充</span>
    </div>
    <div
      v-if="actionType === 'setFontColor'"
      class="color-none"
      @click="handleChangeColor('#000000')"
    >
      <span class="color-point" style="background-color: #000"></span>
      <span class="text">默认颜色</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ColorSelect',
  data () {
    return {
      actionType: '', // 操作类型
      showColor: false, // 展示顔色的彈窗
      activeColor: '#000000',
      topColors: [
        '#ffffff',
        '#000000',
        '#EEECE1',
        '#1F497D',
        '#4F81BD',
        '#C0504D',
        '#9BBB59',
        '#8064A2',
        '#4BACC6',
        '#F79646'
      ],
      contentColors: [
        [
          '#F2F2F2',
          '#7F7F7F',
          '#DDD9C3',
          '#C6D9F0',
          '#DBE5F1',
          '#F2DCDB',
          '#EBF1DD',
          '#E5E0EC',
          '#DBEEF3',
          '#FDEADA'
        ],
        [
          '#D8D8D8',
          '#595959',
          '#C4BD97',
          '#8DB3E2',
          '#B8CCE4',
          '#E5B9B7',
          '#D7E3BC',
          '#CCC1D9',
          '#B7DDE8',
          '#FBD5B5'
        ],
        [
          '#BFBFBF',
          '#3F3F3F',
          '#938953',
          '#548DD4',
          '#95B3D7',
          '#D99694',
          '#C3D69B',
          '#B2A2C7',
          '#92CDDC',
          '#FAC08F'
        ],
        [
          '#A5A5A5',
          '#262626',
          '#494429',
          '#17365D',
          '#366092',
          '#953734',
          '#76923C',
          '#5F497A',
          '#31849B',
          '#E36C09'
        ],
        [
          '#808080',
          '#0C0C0C',
          '#1D1B10',
          '#0F243E',
          '#244061',
          '#632423',
          '#4F6128',
          '#3F3151',
          '#205867',
          '#984806'
        ]
      ],
      standardColors: [
        '#C00000',
        '#FF0000',
        '#FFC000',
        '#FFFF00',
        '#92D050',
        '#00B050',
        '#00B0F0',
        '#0070C0',
        '#002060',
        '#7030A0'
      ]
    }
  },
  mounted: function () {
    const that = this
    const func = (e) => {
      if (
        that.showColor &&
        e.target.className !== 'color-picker' &&
        e.target.className !== 'drop-down-arrow'
      ) {
        that.showColor = false
      }
    }
    document.addEventListener('click', func)
  },
  methods: {
    initColorPicker (data) {
      if (data.showColor === false || data.showColor === true) {
        this.showColor = data.showColor
      } else if (data.actionType !== this.actionType) {
        this.showColor = true
      } else {
        this.showColor = !this.showColor
      }
      if (!data.actionType) return

      if (data.color.indexOf('#') < 0) {
        this.activeColor = '#' + data.color
      } else {
        this.activeColor = data.color
      }
      this.actionType = data.actionType
    },
    handleChangeColor (color) {
      this.showColor = false
      const data = { actionType: this.actionType, color }
      this.$emit('changeColor', data)
    }
  }
}
</script>
<style>
.color-picker {
  padding: 0 15px 15px;
}
.color-picker::before {
  content: '';
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 999999999;
  top: -6px;
  left: 32px;
}
.color-picker:hover {
  cursor: default;
}

.color-picker .title {
  font-size: 12px;
  color: #03101a;
  line-height: 20px;
  text-align: left;
  margin-bottom: 5px;
  width: 48px;
  margin-top: 15px;
}

.color-picker .color-point {
  height: 17px;
  width: 17px;
  border: 1px solid #d2d2d2;
  box-sizing: border-box;
}

.color-picker .color-point:hover {
  border: 1px solid #d2d2d2 !important;
  box-shadow: 0 0 4px 0 rgba(0, 149, 255, 0.8);
  cursor: pointer;
}

.color-picker .color-point.actived {
  border: 1px solid #fff !important;
  outline: 1px solid rgba(0, 149, 255, 0.8);
}

.color-picker .color-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 199px;
}

.color-picker .color-content {
  padding-bottom: 15px;
  border-bottom: 1px solid #e4ebf0;
}

.color-picker .color-content .color-row .color-point {
  border-left: 1px solid rgba(3, 16, 26, 0.3);
  border-right: 1px solid rgba(3, 16, 26, 0.3);
  border-top: none;
  border-bottom: none;
}

.color-picker .color-content .color-row:first-child {
  margin-top: 8px;
}

.color-picker .color-content .color-row:first-child .color-point {
  border-top: 1px solid rgba(3, 16, 26, 0.3);
}

.color-picker .color-content .color-row:last-child .color-point {
  border-bottom: 1px solid rgba(3, 16, 26, 0.3);
}

.color-picker .color-standard {
  padding-bottom: 15px;
  border-bottom: 1px solid #e4ebf0;
}

.color-picker .color-none {
  display: inline-block;
  margin-top: 15px;
  align-items: center;
}

.color-picker .color-none:hover {
  cursor: pointer;
}

.color-picker .color-none span {
  display: inline-block;
}

.color-picker .color-none .text {
  font-size: 12px;
  color: #03101a;
  line-height: 17px;
  text-align: left;
  padding-left: 5px;
  vertical-align: top;
}

.color-picker .color-point.actived {
  border: 1px solid #fff !important;
  outline: 1px solid rgba(0, 149, 255, 0.8);
}
</style>
